<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">安全交底详情</block>
			</cu-custom>
			<view class="cu-item" >
				<uni-section title="作业信息" type="line">
					<uni-card padding="0" spacing="0">
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">施工作业单位</view>
								<view class="content">{{formData.operationCompany}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">施工单位负责人</view>
								<view class="content">{{formData.constructionMan}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">作业所属单位负责人</view>
								<view class="content">{{formData.operationChargePerson_dictText}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">作业内容</view>
								<view class="content">{{formData.content}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">作业开始时间</view>
								<view class="content">{{formData.planStartDate}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">作业结束时间</view>
								<view class="content">{{formData.planEndDate}}</view>
							</view>
						</view>
					</uni-card>
				</uni-section>
				
				<uni-section title="基本要求" type="line">
					<uni-card padding="0" spacing="0">
						<view class="cu-item" >
							<view class="cu-form-group">
								<span>
									作业前，项目负责人与申请单位业务主管应对施工作业人员进行安全交底和风险告知，
									内容包括作业许可范围及作业环境、作业风险、防范措施(工艺、设备、个体防护等)、
									应急措施及其他注意事项。作业人员应按照风险告知内容，逐条对接确认，落实到位后方可作业。
								</span>
							</view>
						</view>
					</uni-card>
				</uni-section>
				
				<uni-section title="安全交底" type="line">
					<uni-card padding="0" spacing="0">
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">作业风险</view>
								<view class="content">{{formData.riskIdentificationResult_dictText}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">作业许可范围及作业环境</view>
								<view class="content">{{securityDisclosureDetail.jobEnvironment}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">防范措施（工艺、设备、个体防护等）</view>
								<view class="content">{{securityDisclosureDetail.preventiveMeasures}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group">
								<view class="title">应急措施</view>
								<view class="content">{{securityDisclosureDetail.emergencyMeasure}}</view>
							</view>
						</view>
						<view class="cu-item" >
							<view class="cu-form-group" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="cu-form-group" @tap="ChooseImage" v-if="imgList.length<1">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</uni-card>
				</uni-section>
				
				<uni-section title="签字确认" type="line">
					<uni-card padding="0" spacing="0">
						<view class="sign-img-item" >
							<view class="cu-form-group">
								<span>
									我方所有施工作业人员已明确该项目的风险并清除了危害、防范措施和其他注意事项。
								</span>
							</view>
						</view>
						<view class="sign-img-item" >
							<view class="sign-img-empty" v-if="this.securityDisclosureDetail.confessorImg ==null || this.securityDisclosureDetail.confessorImg == ''">
								<view class="sign-img-title">安全交底企业人签名</view>
								<view class="sign-img-content" @click="signBtn('1')">点击签名</view>
							</view>
							<view class="sign-img-have" v-if="this.securityDisclosureDetail.confessorImg !=null || this.securityDisclosureDetail.confessorImg != ''">
								<image :src="this.securityDisclosureDetail.confessorImg" alt="Base64 Image">
							</view>
						</view>
						<view class="sign-img-item" >
							<view class="sign-img-empty" v-if="this.securityDisclosureDetail.theBetrayedImg ==null || this.securityDisclosureDetail.theBetrayedImg == ''">
								<view class="sign-img-title">现场单位作业负责人签名</view>
								<view class="sign-img-content" @click="signBtn('2')">点击签名</view>
							</view>
							<view class="sign-img-have" v-if="this.securityDisclosureDetail.aPrincipalImg !=null || this.securityDisclosureDetail.aPrincipalImg != ''">
								<image :src="this.securityDisclosureDetail.aPrincipalImg" alt="Base64 Image">
							</view>
						</view>
						<view class="sign-img-item" >
							<view class="sign-img-empty" v-if="this.securityDisclosureDetail.theBetrayedImg ==null || this.securityDisclosureDetail.theBetrayedImg == ''">
								<view class="sign-img-title">接受安全交底人签字</view>
								<view class="sign-img-content" @click="signBtn('3')">点击签名</view>
							</view>
							<view class="sign-img-have" v-if="this.securityDisclosureDetail.theBetrayedImg !=null || this.securityDisclosureDetail.theBetrayedImg != ''">
								<image :src="this.securityDisclosureDetail.theBetrayedImg" alt="Base64 Image">
							</view>
						</view>
					</uni-card>
				</uni-section>
				
				<!-- popup弹窗 -->
				<uni-popup ref="popup" background-color="#fff">
					<view class="popup-content" :class="{ 'popup-height': 'center' }">
						<button class="mini-btn" type="primary" size="mini" @click="signTypeBtn('1')">工卡读取</button>
						<button class="mini-btn" type="default" size="mini" @click="signTypeBtn('2')">人脸识别</button>
						<button class="mini-btn" type="warn" size="mini" @click="signTypeBtn('3')">手写签字</button>
						<button class="mini-btn" type="default" size="mini" @click="signTypeBtn('4')">账号密码</button>
					</view>
				</uni-popup>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "jobTicketSecurityDisclosureDetail",
		data() {
			return {
				modalName: null,
				formData: {},
				securityDisclosureDetail: {},
				imgList: [],
				signStationLocationMarker: "",
				url:{
					uploadUrl: "/sys/common/upload",
				},
			};
		},
		onLoad() {
			//console.log("-----query------"+JSON.stringify(this.$Route.query))
			this.formData = this.$Route.query.jobTicket;
			this.securityDisclosureDetail = this.$Route.query.securityDisclosureDetail;
		},
		mounted() {
		},
		methods: {
			signBtn(val){
				this.signStationLocationMarker = val;
				this.$refs.popup.open("center");
			},
			signTypeBtn(val) {
				if(val == "1"){
					
				}else if(val == "2"){
					
				}else if(val == "3"){
					this.$Router.push({name: 'signature'})
				}else if(val == "4"){
					
				}
			},
			getSignature(val){
				this.$refs.popup.close();
				if(this.signStationLocationMarker == "1"){
					this.securityDisclosureDetail.confessorImg = val;
				}else if(this.signStationLocationMarker == "2"){
					this.securityDisclosureDetail.aPrincipalImg = val;
				}else if(this.signStationLocationMarker == "3"){
					this.securityDisclosureDetail.theBetrayedImg = val;
				}
			},
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.url.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.securityDisclosureDetail.breakGroundImg = res.data.message;
							})
							.catch(err => {
								that.$tip.error(err)
							});
						this.imgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除图片',
					content: '确定要删除这个图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.sign-img-item{
		border: 1px;
		border-color: #303030;
		margin-top: 5px;
	}
	.sign-img-empty{
		background-color: #b6b6b6;
		//height: 60px;
		height: 40Vh;
	}
	.sign-img-have{
		background-color: #b6b6b6;
	}
	.sign-img-title{
		font-weight: bold;
	}
	.sign-img-content{
		text-align: center;
		margin-top: 10%;
	}
	
	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		//width: 200px;
		height: 50px;
		background-color: #fff;
	}
</style>
